<template>
    <div class="mc">
        <div class="ma1">
            <div class="mcc">
                <P class="mcc1">请输入交易密码</P>
                <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%A7%A3%E7%BB%91%E9%93%B6%E8%A1%8C%E5%8D%A1/u3208.png" class="mcc2" @click="cancel" />
             </div>
            <van-password-input
            :value="value"
            :error-info="errorInfo"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            :length=6
            :gutter="10"
            />
            <van-number-keyboard
            close-button-text="忘记密码"
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
            @close = 'close'
            />
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      errorInfo: '',
      showKeyboard: true,
      mima:''
    };
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== this.mima ) {
        this.errorInfo = '密码错误';
      } else if(value.length === 6 && value == this.mima){
        this.errorInfo = '密码正确';
        this.$emit('zf')
        this.errorInfo = '';
        this.value =''
      }

    },
  },
  methods:{
    cancel(){
        this.$emit('cancel')
        this.value = ''
    },
    close(){
        this.$router.push('/ForgotTradingPassword')
    }
  },
  created() {
    this.mima = this.$store.state.TransactionPassword
  },
};
</script>
<style scoped>
.mc{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
.mc_1{
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top-right-radius: 15px;
    border-top-left-radius:15px ;
}
.ma1{
    width: 100%;
    height: 65%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.mcc{
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    padding: 20px;
}
.mcc1{
    margin: 0 auto;
}
.van-password-input__security li{
 background-color: #f2f2f2;
}

</style>